<template>
  <el-pagination
    v-model:currentPage="page.page"
    :page-sizes="[15, 25, 50, 100]"
    :page-size="page.page_size"
    background
    layout="total, prev, pager, next, sizes"
    :total="page.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>
<script lang="ts" setup>
import { store } from "@/store";
import { ref, reactive, computed } from "vue";
import bus from "@/utils/bus"
const emit = defineEmits({
  pageSizeChange: null,
  pageChange: null
});
// 总数量
const pageTotal = computed(() => {
  return store.getters["pageTotal"];
});
const page = reactive({
  page: 1,
  page_size: 15,
  total: pageTotal,
});
const handleSizeChange = (val: number) => {
  page.page_size = val
  emit('pageSizeChange', page)
  console.log(`${val} 每页显示多少条`)
}
const handleCurrentChange = (val: number) => {
  page.page = val
  emit('pageChange', page)
  // bus.emit("getImagesList")
  console.log(`当前页: ${val}`)
}
</script>
